<template>
  <div style="width: 100%; height: calc(100vh - 274px)">
    <div id="dicomImage"></div>
  </div>
</template>

<script>
// 加载相关库文件
import cornerstone from "./dist/cornerstone";
import cornerstoneMath from "./dist/cornerstoneMath.min";
import cornerstoneTools from "./dist/cornerstoneTools";
import Hammer from "./dist/hammer";
import dicomParser from "./dist/dicomParser.min";
import cornerstoneWADOImageLoader from "./dist/cornerstoneWADOImageLoader.bundle.min";
import cornerstoneWebImageLoader from "./dist/cornerstoneWebImageLoader.min";

export default {
  name: "dcmview",
  props: {
    currentDcm: {
      type: Array,
      default: [],
    },
    imgurl: {
      type: String,
      default: "",
    },
    toolType: {
      type: String,
      default: "Wwwc",
    },
    width: {
      type: String,
      default: "1150px",
    },
    height: {
      type: String,
      default: "1000px",
    },
  },
  data() {
    return {
      imageIds: ["123"],
    };
  },
  watch: {
    toolType: {
      handler(newVal, lodVal) {
        console.log(newVal, lodVal);
        this.viewDcm1();
      },
    },
    currentDcm: {
      handler(newVal, lodVal) {
        console.log("newVal", newVal);
        this.handleDcm(newVal);
      },
    },
  },
  mounted() {
    this.handleDcm(this.currentDcm);
    this.viewDcm();
  },
  methods: {
    // 处理获取图像数组
    async handleDcm(_Arr) {
      let that = this;
      this.imageIds = [];
      await _Arr.forEach((item) => {
        this.imageIds.push("dicomweb:" + item.url);
        console.log("this.imageIds: ", this.imageIds);
      });
      this.viewDcm();
    },
    // 显示dcm图片函数
    viewDcm() {
      cornerstoneTools.external.cornerstone = cornerstone;
      cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
      cornerstoneTools.external.Hammer = Hammer;
      cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
      cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
      cornerstoneWADOImageLoader.webWorkerManager.initialize({
        maxWebWorkers: navigator.hardwareConcurrency || 1,
        startWebWorkersOnDemand: true,
        taskConfiguration: {
          decodeTask: {
            initializeCodecsOnStartup: false,
          },
        },
        webWorkerPath: "./dist/cornerstoneWADOImageLoader.bundleCopy.min.js",
      });
      cornerstoneTools.init({
        mouseEnabled: true, //触摸
        touchEnabled: true, //鼠标
        showSVGCursors: true,
        autoResizeViewports: true,
      });
      const element = document.getElementById("dicomImage");

      cornerstone.enable(element);

      // const PanTool = cornerstoneTools.PanTool;

      const StackScrollTool = cornerstoneTools.StackScrollTool;
      const StackScrollMouseWheelTool =
        cornerstoneTools.StackScrollMouseWheelTool;
      const imageIds = this.imageIds;
      const stack = {
        currentImageIdIndex: 0,
        imageIds: imageIds,
      };
      console.log("imageIds", imageIds);
      element.addEventListener("cornerstonenewimage", (event) => {
        console.log("event: ", event);
        // console.log(event.detail.oldImage, stack.currentImageIdIndex, 'event')
        this.hanldeByValue(stack.currentImageIdIndex);
      });
      element.addEventListener("cornerstonetap", (event) => {
        console.log("cornerstonetap: ", cornerstonetap);
        const direction = event.detail.direction;
        if (direction === "LEFT") {
          // 向左划动
          stack.currentImageIdIndex++;
        } else if (direction === "RIGHT") {
          // 向右划动
          stack.currentImageIdIndex--;
        }

        // 更新堆栈中的当前图像
        const imageIds = stack.imageIds;
        const newImageIdIndex = stack.currentImageIdIndex;
        const newImageId = imageIds[newImageIdIndex];
        cornerstone.loadAndCacheImage(newImageId).then((loadedImage) => {
          cornerstone.displayImage(element, loadedImage);
        });
      });
      cornerstone.loadImage(imageIds[0]).then((image) => {
        console.log(image, "image");
        cornerstone.displayImage(element, image);
        cornerstoneTools.addStackStateManager(element, ["stack"]);
        cornerstoneTools.addToolState(element, "stack", stack);
        // cornerstoneTools.addTool(PanTool);
        cornerstoneTools.addTool(StackScrollTool, {
          configuration: {
            loop: true,
            allowSkipping: true,
          },
        });
        cornerstoneTools.addTool(StackScrollMouseWheelTool, {
          configuration: {
            loop: true,
            allowSkipping: true,
            invert: false,
          },
        });
        // cornerstoneTools.setToolActive('Pan', { mouseButtonMask: 1 });
        cornerstoneTools.setToolActive("StackScroll", {
          mouseButtonMask: 1,
        });
        cornerstoneTools.setToolActive("StackScrollMouseWheel", {
          mouseButtonMask: 4,
        });
      });
    },
    // 显示dcm图片函数
    // viewDcm() {
    //   // 注册并挂载cornerstone及其cornerstoneTools，固定操作
    //   cornerstoneTools.external.cornerstone = cornerstone;
    //   cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    //   cornerstoneTools.external.Hammer = Hammer;
    //   cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    //   cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    //   // imageId就是cornerstone要求的.dcm图片地址,例如：var imageId = "wadouri:http://127.0.0.1:6699/ctdcm1.dcm";
    //   //此处因作为组件使用，故为地址拼接。(imgurl通过在props中传值)
    //   var imageId = "wadouri:" + this.imgurl;
    //   // 初始化cornerstoneTools
    //   cornerstoneTools.init();
    //   // 获取要用于加载图片的div区域
    //   var element = document.getElementById("dicomImage");
    //   //激活获取到的用于图片加载的区域
    //   cornerstone.enable(element);

    //   switch (this.toolType) {
    //     case "Wwwc":
    //       // 从cornerstoneTools库中获取窗宽,窗高工具
    //       const WwwcTool = cornerstoneTools.WwwcTool;
    //       //添加WwwcTool窗宽,窗高工具
    //       cornerstoneTools.addTool(WwwcTool);
    //       // 绑定工具操作功能到鼠标左键
    //       cornerstoneTools.setToolActive("Wwwc", {
    //         mouseButtonMask: 1,
    //       });
    //       break;
    //     case "Angle":
    //       // 角度工具
    //       const AngleTool = cornerstoneTools.AngleTool;
    //       cornerstoneTools.addTool(AngleTool);
    //       cornerstoneTools.setToolActive("Angle", {
    //         mouseButtonMask: 1,
    //       });
    //       break;
    //     case "RectangleRoi":
    //       // 矩形Roi工具
    //       const RectangleRoiTool = cornerstoneTools.RectangleRoiTool;
    //       cornerstoneTools.addTool(RectangleRoiTool);
    //       cornerstoneTools.setToolActive("RectangleRoi", {
    //         mouseButtonMask: 1,
    //       });
    //       break;
    //     case "DragProbe":
    //       // 拖动探针工具
    //       const DragProbeTool = cornerstoneTools.DragProbeTool;
    //       cornerstoneTools.addTool(DragProbeTool);
    //       cornerstoneTools.setToolActive("DragProbe", {
    //         mouseButtonMask: 1,
    //       });
    //       break;
    //     case "Length":
    //       // 长度工具
    //       const LengthTool = cornerstoneTools.LengthTool;
    //       cornerstoneTools.addTool(LengthTool);
    //       cornerstoneTools.setToolActive("Length", {
    //         mouseButtonMask: 1,
    //       });
    //       break;
    //     default:
    //       throw new Error("工具参数错误");
    //       break;
    //   }
    //   //使用loadAndCacheImage()方法加载并缓存图片，然后使用displayImage()方法显示图片。
    //   cornerstone.loadAndCacheImage(imageId).then(function (image) {
    //     cornerstone.displayImage(element, image);
    //   });
    // },
    // 显示dcm图片函数
    viewDcm1() {
      var element = document.getElementById("dicomImage");
      //激活获取到的用于图片加载的区域
      console.log("this.toolType: ", this.toolType);
      switch (this.toolType) {
        case "ScrollTool":
          const StackScrollTool = cornerstoneTools.StackScrollTool;
          const StackScrollMouseWheelTool =
            cornerstoneTools.StackScrollMouseWheelTool;
          cornerstoneTools.addTool(StackScrollTool, {
            configuration: {
              loop: true,
              allowSkipping: true,
            },
          });
          cornerstoneTools.addTool(StackScrollMouseWheelTool, {
            configuration: {
              loop: true,
              allowSkipping: true,
              invert: false,
            },
          });
          // cornerstoneTools.setToolActive('Pan', { mouseButtonMask: 1 });
          cornerstoneTools.setToolActive("StackScroll", {
            mouseButtonMask: 1,
          });
          cornerstoneTools.setToolActive("StackScrollMouseWheel", {
            mouseButtonMask: 4,
          });
          break;
        case "Wwwc":
          // 从cornerstoneTools库中获取窗宽,窗高工具
          const WwwcTool = cornerstoneTools.WwwcTool;
          //添加WwwcTool窗宽,窗高工具
          cornerstoneTools.addTool(WwwcTool);
          // 绑定工具操作功能到鼠标左键
          cornerstoneTools.setToolActive("Wwwc", {
            mouseButtonMask: 1,
          });
          break;
        case "Angle":
          // 角度工具
          const AngleTool = cornerstoneTools.AngleTool;
          cornerstoneTools.addTool(AngleTool);
          cornerstoneTools.setToolActive("Angle", {
            mouseButtonMask: 1,
          });
          break;
        case "RectangleRoi":
          // 矩形Roi工具
          const RectangleRoiTool = cornerstoneTools.RectangleRoiTool;
          cornerstoneTools.addTool(RectangleRoiTool);
          cornerstoneTools.setToolActive("RectangleRoi", {
            mouseButtonMask: 1,
          });
          break;
        case "DragProbe":
          // 拖动探针工具
          const DragProbeTool = cornerstoneTools.DragProbeTool;
          cornerstoneTools.addTool(DragProbeTool);
          cornerstoneTools.setToolActive("DragProbe", {
            mouseButtonMask: 1,
          });
          break;
        case "Length":
          // 长度工具
          const LengthTool = cornerstoneTools.LengthTool;
          cornerstoneTools.addTool(LengthTool);
          cornerstoneTools.setToolActive("Length", {
            mouseButtonMask: 1,
          });
          break;
        case "Zoom":
          // 放大缩小
          const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;
          cornerstoneTools.addTool(ZoomMouseWheelTool);
          cornerstoneTools.setToolActive("ZoomMouseWheel", {
            mouseButtonMask: 1,
          });
          break;
        case "eliminate":
          // 清空效果
          cornerstoneTools.clearToolState(element, "Length");
          break;
        default:
          throw new Error("工具参数错误");
          break;
      }
    },
    clearAllTool() {
      for (let k in this.name) {
        cornerstoneTools.clearToolState(this.element, this.name[k]);
      }
      // 写了他才能让界面也更新清除了tool的视图
      cornerstone.updateImage(this.element);
      // reset viewport将视图重置位置
      cornerstone.reset(this.element);
    },
    // 给父组件传值
    hanldeByValue(_index) {
      this.$emit("byValue", _index);
    },
  },
};
</script>

<style>
/* 定义图片显示区域div大小 */
#dicomImage {
  width: 100%;
  height: 100%;
}

.btn {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>
